<template>
  <section class="goods-header">
    <singleHeader pageName="商品详情"></singleHeader>
    <div class="goods-swiper" :style="swiperCss" @click="gotoEdit">
      <a-carousel class="swiper-box">
        <div class="swiper-content"></div>
      </a-carousel>
    </div>
  </section>
</template>

<script>
import singleHeader from "../../components/singleHeader/index.vue";
export default {
  name: "",
  props: {
    propsData: {
      type: Object,
      default: {},
    },
  },
  mixins: [],
  components: {
    singleHeader,
  },
  data() {
    return {};
  },
  mounted() {
    console.log(this.propsData)
  },
  watch: {},
  computed: {
    swiperCss() {
      let params = this.propsData.params;
      return {
        margin: `0 0 ${params.margin}px 0`,
      };
    },
  },
  methods: {
    gotoEdit() {
      let data = Object.assign({}, this.propsData);
      data.controlComName = "goodsSwiperImgsControl";
      this.$emit("chooseMoudle", data);
    },
  },
};
</script>

<style lang="scss" scoped>
.goods-header {
  width: 100%;
  .goods-swiper {
    width: 100%;
    height: 375px;
    background: #a36767;
    .swiper-box {
      width: 100%;
      height: 100%;
      .swiper-content {
        width: 100%;
        height: 375px;
      }
    }
  }
}
</style>
